<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件上传示例</title>
    <style>
        .container {
            text-align: center;
            height: 700px;
        }

        input[type="file"] {
            display: none;
        }

        /* 自定义按钮样式 */
        .custom-button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .box {
            margin: 25px auto;
            text-align: center;
            width: 200px;
            min-height: 50px;
        }

        /* 当鼠标悬停在按钮上时改变背景颜色 */
        .custom-button:hover {
            background-color: #6e8ff0;
        }

        button {
            margin-top: 50px;
            padding: 16px 50px;
            background-color: #48e4b0;
            color: #fff;
            border: none;
            border-radius: 5px;
        }
    </style>
</head>

<body>
<div class="container">
    <h1>上传文件</h1>
    <form action="/api/student/upload/test" method="post" enctype="multipart/form-data">
        <label for="fileInput" class="custom-button">选择文件</label>
        <input type="file" name="file" id="fileInput" multiple>
        <input type="hidden" name="userId" id="userId"  value="">
        <div class="box">
            <div id="imagePreview"></div>
        </div>
        <br>
        <button type="submit">上传</button>
    </form>
</div>
</body>
<script>
    // 获取文件上传输入框和图片预览容器
    const fileInput = document.getElementById('fileInput');
    const imagePreview = document.getElementById('imagePreview');
    // 获取URL对象
    const url = new URL(window.location.href);

    // 获取id的值
    const id = url.searchParams.get('userId');

    console.log(id); // 输出: "1"
    document.getElementById('userId').value = id;
    // 监听文件上传输入框的变化事件
    fileInput.addEventListener('change', function (event) {
        // 清空图片预览容器
        imagePreview.innerHTML = '';
        // 获取上传的文件列表
        const files = event.target.files;
        // 遍历文件列表，创建图片预览并添加到图片预览容器中
        for (let i = 0; i < files.length; i++) {
            const file = files[i];
            const reader = new FileReader();
            // 使用 FileReader 读取文件内容并生成 Data URL
            reader.readAsDataURL(file);
            reader.onload = function () {
                const imgElement = document.createElement('img');
                imgElement.src = reader.result;
                imgElement.style.maxWidth = '350px'; // 设置图片最大宽度
                imgElement.style.maxHeight = '450px'; // 设置图片最大高度
                imagePreview.appendChild(imgElement);
            }
        }
    });
</script>
</html>